<template>
  <div class="app-container">
    <el-row :gutter="6">
      <el-col :span="14">
        <el-card style="height: calc(100vh - 125px)">
          <div slot="header">
            <span><i class="el-icon-collection"></i>项目列表</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              icon="el-icon-refresh-right"
              @click="refreshCacheNames()"
            ></el-button>
          </div>
          <el-form class="projectClassName" :model="project.queryParams" ref="projectQueryForm" size="small" :inline="true" v-show="project.showSearch" label-width="68px">
            <el-form-item label="项目编号" prop="pid">
              <el-input v-model="project.queryParams.pid" placeholder="请输入项目编号" clearable @keyup.enter.native="handleQuery" @clear="handleQuery" />
            </el-form-item>
            <el-form-item label="项目名称" prop="pname">
              <el-input v-model="project.queryParams.pname" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery" @clear="handleQuery" />
            </el-form-item>
            <el-form-item label="委托单位" prop="clientId">
              <el-select v-model="project.queryParams.clientId" filterable clearable placeholder="请选择委托单位" @change="handleQuery" @clear="handleQuery">
                <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审批时间">
              <el-date-picker
                v-model="project.queryParams.beginTime"
                type="date"
                clear
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                @change="beginTimeChange"
                placeholder="选择开始日期">
              </el-date-picker>
               - 
              <el-date-picker
                v-model="project.queryParams.endTime"
                :disabled="!project.queryParams.beginTime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择结束日期"
                @change="changePicker">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="搜索" placement="top">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="重置" placement="top">
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
              </el-tooltip>
            </el-form-item>
          </el-form>
          <!-- <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                @click="deleteProject"
                v-hasPermi="['system:project:add']"
              >删除项目</el-button>
            </el-col>
          </el-row> -->
          <el-table ref="objectTable"
            v-loading="project.loading"
            stripe
            border
            max-height="540px"
            :data="project.list"
            :default-sort="defaultSort"
            highlight-current-row
            @row-click="getCacheKeys">
            <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
            <el-table-column label="选择" fixed width="50" align="center">
              <template slot-scope="scope">
                <span v-show="scope.row.flag" class="checked"></span>
                <span v-show="!scope.row.flag" class="no-check"></span>
              </template>
            </el-table-column>
            <el-table-column label="序号" fixed type="index" width="50" align="center" :index="indexMethod" />
            <el-table-column label="项目编号" fixed align="center" prop="pid" show-overflow-tooltip width="120">
              <template slot-scope="scope">
                <span @dblclick="copyText(scope.row.pid)">{{ scope.row.pid }}</span>
              </template>
            </el-table-column>
            <el-table-column label="项目名称" align="center" prop="pname" show-overflow-tooltip width="220">
              <template slot-scope="scope">
                <span @dblclick="copyText(scope.row.pname)">{{ scope.row.pname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="委托单位" align="center" prop="clientName" show-overflow-tooltip  width="120"/>
            <el-table-column label="审批状态" align="center" show-overflow-tooltip prop="status" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === 0 || scope.row.status === 1 ? '' : (scope.row.status === 3 ? 'success' : 'danger')">{{ selectDictLabel(dict.type.sys_approval_status, scope.row.status) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="审批时间" align="center" prop="agreeTime" width="180" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.agreeTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="220" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-plus"
                  @click="handleAddSection(scope.row)"
                  v-hasPermi="['system:section:add']"
                >新增标段</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-document"
                  @click="addProjectRecord(scope.row)"
                  v-hasPermi="['system:object:record']"
                >备案</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click.stop="getProjectDetail(scope.row.id)"
                  v-hasPermi="['system:object:detail']"
                >查看</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeleteProject(scope.row)"
                  v-hasPermi="['system:object:delete']"
                >删除项目</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="project.total>0"
            :total="project.total"
            :page.sync="project.queryParams.pageNum"
            :limit.sync="project.queryParams.pageSize"
            @pagination="getProjectList"
          />
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card style="height: calc(100vh - 125px)">
          <div slot="header">
            <span><i class="el-icon-collection"></i>项目标段</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              icon="el-icon-refresh-right"
              @click="refreshCacheNames()"
            ></el-button>
          </div>

          <el-form class="sectionClassName" :model="sectionObj.queryParams" ref="sectionQueryForm" size="small" :inline="true" v-show="sectionObj.showSearch" label-width="68px">
            <el-form-item label="招标编号" prop="sectionId">
              <el-input
                v-model="sectionObj.queryParams.sectionId"
                placeholder="请输入招标编号"
                clearable
                @clear="handleSectionQuery"
                @keyup.enter.native="handleSectionQuery"
              />
            </el-form-item>
            <el-form-item label="招标名称" prop="sectionName">
              <el-input
                v-model="sectionObj.queryParams.sectionName"
                placeholder="请输入招标名称"
                clearable
                @clear="handleSectionQuery"
                @keyup.enter.native="handleSectionQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-tooltip class="item" effect="dark" content="搜索" placement="top">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSectionQuery"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="重置" placement="top">
                <el-button icon="el-icon-refresh" size="mini" @click="resetSectionQuery"></el-button>
              </el-tooltip>
            </el-form-item>
          </el-form>
          <el-table v-loading="sectionObj.loading" :data="sectionObj.list" border max-height="540px">
            <el-table-column label="序号" type="index" fixed width="55" align="center" />
            <el-table-column label="招标编号" align="center" fixed prop="sectionId" show-overflow-tooltip width="140">
              <template slot-scope="scope">
                <span @dblclick="copyText(scope.row.sectionId)">{{ scope.row.sectionId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="招标名称" align="center" prop="sectionName" show-overflow-tooltip>
              <template slot-scope="scope">
                <span @dblclick="copyText(scope.row.sectionName)">{{ scope.row.sectionName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="招标进度" align="center" prop="sectionProgress" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag>
                  <dict-tag :options="dict.type.section_progress" :value="scope.row.sectionProgress"/>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['system:section:edit']"
                >修改</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleSectionDetail(scope.row)"
                  v-hasPermi="['system:section:detail']"
                >查看</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['system:section:remove']"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="sectionObj.total>0"
            :total="sectionObj.total"
            :page.sync="sectionObj.queryParams.pageNum"
            :limit.sync="sectionObj.queryParams.pageSize"
            @pagination="getList"
          />

        </el-card>
      </el-col>
    </el-row>

    <!-- 备案 -->
    <el-dialog :title="recordDialog.title" :before-close="cancelRecord" :visible.sync="recordDialog.open" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="projectRecordForm" :model="projectRecord.form" label-width="96px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="备案号" prop="recordid">
              <el-input v-model="projectRecord.form.recordid" placeholder="请输入备案号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="备案时间" prop="recordTime">
              <el-date-picker clearable
                v-model="projectRecord.form.recordTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择备案时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRecordForm">确 定</el-button>
        <el-button @click="cancelRecord">取 消</el-button>
      </div>


    </el-dialog>

    <!-- 查看项目 -->
    <el-dialog :title="project.title" :visible.sync="project.open" width="900px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="project.form" label-width="96px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="project.form.deptName" disabled placeholder="请输入部门名称" />
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="项目名称" prop="pname">
              <el-input v-model="project.form.pname" disabled placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="所属板块" prop="plateId">
              <el-select v-model="project.form.plateId" placeholder="请选择所属板块" disabled @change="getClientList">
                <el-option
                  v-for="item in plateList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="委托单位" prop="clientId">
              <el-select v-model="project.form.clientId" disabled placeholder="请选择委托单位">
                <el-option
                  v-for="item in clientList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="资金来源" prop="sourcefunds">
              <el-select v-model="project.form.sourcefunds" disabled placeholder="请选择资金来源">
                <el-option
                  v-for="dict in dict.type.sys_nego_source"
                  :key="dict.value"
                  :label="dict.label"
                  :value="Number(dict.value)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="部门负责人" prop="leader">
              <el-input v-model="project.form.leader" placeholder="请输入部门负责人" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="项目负责人" prop="assistant">
              <el-input v-model="project.form.assistant" disabled placeholder="请输入项目负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="甲方负责人" prop="jf">
              <el-input v-model="project.form.jf" disabled placeholder="请输入甲方负责人" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="甲方联系电话" title="甲方联系电话" prop="jfPhone">
              <el-input v-model="project.form.jfPhone" disabled placeholder="请输入甲方联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="备案号" prop="recordid">
              <el-input v-model="project.form.recordid" disabled placeholder="请输入备案号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="备案时间" prop="recordTime">
              <el-date-picker clearable
               disabled
                v-model="project.form.recordTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择备案时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="委托时间" prop="clientTime">
              <el-date-picker 
               disabled
                v-model="project.form.clientTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择委托时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="招标范围或主要技术参数" title="招标范围或主要技术参数" prop="tcpa">
              <el-input v-model="project.form.tcpa" type="textarea" rows="2" disabled placeholder="请输入招标范围或主要技术参数" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="组织方式" prop="bidmethod">
              <el-select v-model="project.form.bidmethod" disabled placeholder="请输入组织方式">
                <el-option
                  v-for="dict in dict.type.sys_bidmethos"
                  :key="dict.value"
                  :label="dict.label"
                  :value="Number(dict.value)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="招标类别" prop="bidcategory">
              <el-select v-model="project.form.bidcategory" disabled placeholder="请输入招标类别">
                <el-option
                  v-for="dict in dict.type.sys_bidcategory"
                  :key="dict.value"
                  :label="dict.label"
                  :value="Number(dict.value)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="工程类别">
              <el-select v-model="project.form.enginer" disabled clearable placeholder="请输入工程类别">
                <el-option
                  v-for="dict in dict.type.sys_enginer"
                  :key="dict.value"
                  :label="dict.label"
                  :value="Number(dict.value)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="估算金额" prop="planprice">
              <el-input class="pirce" v-model="project.form.planprice" disabled placeholder="请输入估算金额"/> 元
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="是否外揽" prop="decide">
              <el-radio-group v-model="project.form.decide" disabled placeholder="请输入是否外揽">
                <el-radio :label="dict.value" v-for="dict in dict.type.is_switch" :key="dict.value">{{ dict.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="是否依法" prop="law">
              <el-radio-group v-model="project.form.law" disabled placeholder="请输入是否依法">
                <el-radio :label="Number(dict.value)" v-for="dict in dict.type.is_switch" :key="dict.value">{{ dict.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="project.form.remark" disabled type="textarea" rows="2" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="project.open = false">确 定</el-button>
        <el-button @click="project.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改标段列表对话框 -->
    <el-dialog :title="sectionObj.title" :visible.sync="sectionObj.open" width="900px" append-to-body>
      <el-form ref="sectionForm" :model="sectionObj.form" :rules="sectionObj.rules" label-width="96px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="项目编号" prop="pid">
              <el-input v-model="sectionObj.form.pid" disabled placeholder="请输入项目编号" />
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="招标编号" prop="sectionId">
              <el-input v-model="sectionObj.form.sectionId" :disabled="sectionObj.disabled" placeholder="请输入招标编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="招标名称" prop="sectionName">
              <el-input v-model="sectionObj.form.sectionName" :disabled="sectionObj.disabled" placeholder="请输入招标名称" />
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="估算金额" prop="planprice">
              <el-input class="pirce" v-model="sectionObj.form.planprice" :disabled="sectionObj.disabled" placeholder="请输入估算金额" /> 元
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="11">
            <el-form-item label="控制价" prop="controlprice">
              <el-input class="pirce" v-model="sectionObj.form.controlprice" :disabled="sectionObj.disabled" placeholder="请输入控制价" /> 元
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="23">
            <el-form-item label="标段内容" prop="sectionContent">
              <el-input v-model="sectionObj.form.sectionContent" type="textarea" :disabled="sectionObj.disabled" :rows="4" placeholder="请输入标段内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { listProject, getProject, delProject, updateProject } from "@/api/projectManage/negoApplication"
import { listSection, getSection, delSection, addSection, updateSection } from "@/api/projectManage/sectionList"
import { listPlate } from "@/api/infoMaintain/plateManage"
import { listClient } from "@/api/infoMaintain/entrustUnit"
import { mapGetters } from "vuex"
export default {
  dicts: ['is_switch', 'sys_approval_status', 'sys_nego_source', 'sys_bidmethos', 'sys_bidcategory', 'sys_enginer', 'sys_bidway', 'sys_openarea', 'section_progress'],
  data() {
    return {
      project: {
        // 显示搜索条件
        showSearch: true,
        // 项目列表遮罩层
        loading: false,
        agreeTime: null,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          pname: null,
          pid: null,
          clientId: null,
          deptId: null,
          beginTime: null,
          endTime: null,
          bidcategorys: null,
          status: '3'
        },
        open: false,
        title: '',
        disableInput: true,
        total: 0,
        // 项目列表
        list: [],
        // 项目详情
        form: {}
      },
      sectionObj: {
        // 显示搜索条件
        showSearch: true,
        loading: false,
        title: '',
        open: false,
        disabled: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          sectionId: null,
          sectionName: null
        },
        list: [],
        total: 0,
        form: {},
        rules: {
          sectionId: [
            { required: true, message: "招标编号不能为空", trigger: "blur" }
          ],
          sectionName: [
            { required: true, message: "招标名称不能为空", trigger: "blur" }
          ],
          planprice: [
            { required: true, message: "估算金额不能为空", trigger: "blur" }
          ],
          sectionContent: [
            { required: true, message: "标段内容不能为空", trigger: "blur" }
          ]
        }
      },
      defaultSort: {prop: 'agreeTime', order: 'descending'},
      // 板块列表
      plateList: [],
      // 委托单位列表
      clientList: [],
      // 备案
      projectRecord: {
        form: {
          // 项目id
          id: '',
          recordid: '',
          recordTime: ''
        }
      },
      recordDialog: {
        open: false,
        title: '备案'
      }
    }
  },
  computed: {
    ...mapGetters(['roles', 'userInfo'])
  },
  created() {
    this.getPlateList()
    this.getClientList()
    if (this.roles && (this.roles.indexOf('zb_b') > -1 || this.roles.indexOf('zb_f') > -1)) {
      // 招标部
      this.project.queryParams.deptId = this.userInfo.deptId
      this.project.queryParams.bidcategorys = null
    } else if (this.roles.indexOf('fg_gf') > -1) {
      // 分管工程服务
      this.project.queryParams.bidcategorys = [0, 2]
      this.project.queryParams.deptId = null
    } else if (this.roles.indexOf('fg_h') > -1) {
      // 分管货物
      this.project.queryParams.bidcategorys = [1]
      this.project.queryParams.deptId = null
    } else {
      this.project.queryParams.deptId = null
      this.project.queryParams.bidcategorys = null
    }
    this.getProjectList()
  },
  methods: {
    /** 获取项目列表 */
    getProjectList() {
      this.project.loading = true
      listProject(this.project.queryParams).then(response => {
        this.project.list = response.rows
        this.project.total = response.total
        this.project.loading = false
        // this.handleSortChange(this.defaultSort)
      })
    },
    /** 查询标段列表列表 */
    getList() {
      this.sectionObj.loading = true;
      listSection(this.sectionObj.queryParams).then(response => {
        this.sectionObj.list = response.rows;
        this.sectionObj.total = response.total;
        this.sectionObj.loading = false;
      });
    },
    /** 获取板块 */
    getPlateList() {
      listPlate({ pageNum: 1, pageSize: 1000 }).then(response => {
        this.plateList = response.rows
      })
    },
    /** 获取委托单位 */
    getClientList(plateId) {
      listClient({ pageNum: 1, pageSize: 100000, plateId }).then(response => {
        this.clientList = response.rows
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.project.queryParams.pageNum = 1;
      this.getProjectList();
    },
    /** 搜索重置 */
    resetQuery() {
      this.resetForm("projectQueryForm");
      this.project.queryParams.beginTime = null
      this.project.queryParams.endTime = null
      this.handleQuery();
    },
    /** 查看项目 */
    getProjectDetail(id) {
      getProject(id).then(response => {
        this.project.form = response.data;
        this.getClientList(response.data.plateId)
        this.project.open = true;
        this.project.title = '项目详情'
      });
    },
    /** 新建标段 */
    handleAddSection(row) {
      this.sectionObj.disabled = false
      this.reset()
      this.sectionObj.open = true
      this.sectionObj.title = '新增标段'
      this.sectionObj.form.projectId = row.id
      this.sectionObj.form.pid = row.pid
    },
    // 删除项目
    handleDeleteProject(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除项目ID为"' + ids + '"的数据项？').then(function() {
        return delProject(ids);
      }).then(() => {
        this.getProjectList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 取消按钮
    cancel() {
      this.sectionObj.open = false
      this.reset();
    },
    /** 重置新建标段 */
    reset() {
      this.sectionObj.form = {
        projectId: null,
        sectionId: null,
        sectionName: null,
        planprice: null,
        controlprice: null,
        sectionContent: null,
        sectionProgress: 0
      };
      this.resetForm("sectionForm");
    },
    /** 提交按钮 */
    submitForm() {
      // 删除项目编号
      this.$delete(this.sectionObj.form, 'pid')
      this.$refs["sectionForm"].validate(valid => {
        if (valid) {
          if (this.sectionObj.form.id != null) {
            updateSection(this.sectionObj.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.sectionObj.open = false;
              this.getList()
            });
          } else {
            addSection(this.sectionObj.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.sectionObj.open = false;
              this.getList()
            });
          }
        }
      });
    },
    /** 搜索按钮操作 */
    handleSectionQuery() {
      this.sectionObj.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置标段搜索 */
    resetSectionQuery() {
      this.resetForm("sectionQueryForm")
      this.handleSectionQuery()
    },
    handleSectionDetail(row, flag) {
      this.sectionObj.title = flag ? "标段修改" : "查看标段"
      this.sectionObj.disabled = flag ? false : true
      getSection(row.id).then(response => {
        this.sectionObj.form = response.data
        this.sectionObj.form.pid = row.projectInfo.pid
        this.sectionObj.open = true
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.handleSectionDetail(row, 'exit')
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除标段列表编号为"' + ids + '"的数据项？').then(function() {
        return delSection(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    getCacheKeys(row) {
      if (row.id === this.sectionObj.queryParams.projectId) return
      // 设置图标
      this.project.list.forEach(item => {
        if (row.id === item.id) {
          this.$set(item, 'flag', true)
        } else {
          this.$set(item, 'flag', false)
        }
      })
      // 设置id、设置form的项目编号
      this.sectionObj.queryParams.projectId = row.id
      this.getList()
    },
    changePicker(value) {
      if (!value) return
      if (value === this.project.queryParams.beginTime) {
        this.project.queryParams.beginTime = this.project.queryParams.beginTime + ' 00:00:00'
        this.project.queryParams.endTime = this.project.queryParams.endTime + ' 23:59:59'
      } else {
        this.project.queryParams.beginTime = this.parseTime(this.project.queryParams.beginTime)
        this.project.queryParams.endTime = this.parseTime(this.project.queryParams.endTime)
      }
      this.handleQuery()
    },
    beginTimeChange(value) {
      if (!value) {
        this.project.queryParams.endTime = null
        this.handleQuery()
      } else {
        if (!this.project.queryParams.endTime) {
          return   
        } else {
          this.project.queryParams.beginTime = this.parseTime(this.project.queryParams.beginTime)
          this.handleQuery()
        }
      }
    },
    async copyText(textToCopy) {
      // navigator clipboard 需要https等安全上下文
      if (navigator.clipboard && window.isSecureContext) {
        // navigator clipboard 向剪贴板写文本
        navigator.clipboard.writeText(textToCopy).then(() => {
          this.$modal.msgSuccess('复制成功！')
        })
      } else {
        // 创建text area
        let textArea = document.createElement("textarea");
        textArea.value = textToCopy;
        // 使text area不在viewport，同时设置不可见
        textArea.style.position = "absolute";
        textArea.style.opacity = '0';
        textArea.style.left = "-999999px";
        textArea.style.top = "-999999px";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        let res = new Promise((res, rej) => {
          res(() => {
            document.execCommand('copy')
            textArea.remove();
          })
          rej(false)
        })
        res.then(res => {
          res();
          this.$modal.msgSuccess('复制成功！')
        }).catch(error => {
          this.$modal.msgError('复制失败！')
        })
      }
    },
    // 处理页码连续
    indexMethod(index) {
      return (index + 1) + (this.project.queryParams.pageNum - 1) * this.project.queryParams.pageSize
    },
    // 排序
    handleSortChange({ prop, order }) {
      console.log('order', order);
      
      // 根据排序条件更新数据
      this.sortData(prop, order);
      console.log('this.project.list', this.project.list)
      
    },
    sortData(prop, order) {
      // 根据 prop 和 order 对 this.tableData 进行排序逻辑
      // 例如：使用数组的 sort 方法
      this.project.list.sort((a, b) => {
        if (order === 'ascending') {
          return a[prop] > b[prop] ? 1 : -1
        } else if (order === 'descending') {
          return a[prop] < b[prop] ? 1 : -1
        }
        return 0
      })
    },
    // 备案
    addProjectRecord(row) {
      this.projectRecord.form.id = row.id
      this.projectRecord.form.recordid = row.recordid
      this.projectRecord.form.recordTime = row.recordTime
      this.recordDialog.open = true
    },
    // 提交备案
    submitRecordForm() {
      this.$refs["projectRecordForm"].validate(valid => {
        if (valid) {
          updateProject(this.projectRecord.form).then(response => {
            this.$modal.msgSuccess("备案成功")
            this.cancelRecord()
            this.getProjectList()
          }, error => {
            this.$modal.msgError(error)
          });
        }
      })

    },
    cancelRecord() {
      this.projectRecord.form.id = ''
      this.projectRecord.form.recordid = ''
      this.projectRecord.form.recordTime = ''
      this.recordDialog.open = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card {
  .el-card__header {
    padding: 14px 14px 9px 14px;
  }
  .el-card__body {
    padding: 14px 14px 20px 14px;
    overflow-y: auto;
    .projectClassName {
      .el-input {
        width: 230px !important;
      }
    }
    .el-form {
      .el-input {
        width: 201px;
      }
    }
  }
}
::v-deep .el-dialog{
  .el-date-editor, .el-input, .el-select {
    width: 100%;
  }
  .el-dialog__body {
    padding: 30px 10px 30px 30px;
  }
  .el-form-item__label {
    max-width: 100px; /* 你可以根据需要调整这个值 */
    white-space: nowrap; /* 防止文字换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 文字溢出时显示省略号 */
  }
  .is-disabled{
    .el-textarea__inner, .el-input__inner {
      color: #333333;
    }
    .el-radio__label {
      color: #333333;
    }
    .el-radio__inner {
      border-color: #333333;
      &::after {
        background: #333333;
      }
    }
  }
  .pirce {
    width: 94%;
  }
}

.checked {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1890ff;
}
.no-check {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #909399;
}


</style>